<template>
  <div class="app-container">
    <el-input
      v-model="search.title" 
      style=" width: 200px;
            padding-left: 10px;
            padding-top: 5px;"
      size="medium"
      clearable
      placeholder="请输入商品名称"></el-input>
      <el-select
      v-model="search.state"
      clearable
      style=" width: 200px;
      padding-left: 10px;
      padding-top: 5px;"
      size="medium"
      placeholder="请选择状态"
    >
      <el-option
        v-for="item in option1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
        <el-cascader
        style=" width: 200px;
        padding-left: 10px;
        padding-top: 5px;"
         size="medium"
         clearable
         placeholder="请选则商品类目"
        v-model="search.cat"
        :options="option"
        :props="{ expandTrigger: 'hover' , label: 'categoryName', value: 'id'}"
       ></el-cascader>
      <!-- <el-cascader
      v-model="input"
        style=" width: 200px;
            padding-left: 10px;
            padding-top: 5px;"
       size="medium"
    :options="options"
    :props="{ checkStrictly: true }"
    clearable></el-cascader> -->
      <el-button type="primary" style="margin-left:10px" size="medium" icon="el-icon-search" @click="searchList()">查找</el-button>
      
      <el-button type="primary" v-hasBtn="'product_add'" style="margin-left:10px" size="medium" icon="el-icon-edit" @click="to()">添加</el-button>
      <!-- <el-button type="danger" style="margin-left:10px" size="medium" icon="el-icon-delete" @click="open1" >批量删除</el-button> -->
      
      <el-table
      :data="tableData"
      style="width:150%; margin-top: 20px"
      border
      :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
      :cell-style="{ 'text-align': 'center' }"
    > <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column type="expand" label="sku信息" >
        <template slot-scope="props">
          <el-form  inline label-position="left" class="demo-table-expand">

            <el-form-item label="商品条码:">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="商品规格:">
              <span>{{ props.row.unit }}</span>
            </el-form-item>
            <el-form-item label="原价/元:">
              <span>{{ props.row.voOriginalPrice }}</span>
            </el-form-item>
            <el-form-item label="现价/元:">
              <span>{{ props.row.voPrice }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      
      <el-table-column label="商品ID" prop="id" />
      <el-table-column label="名称" prop="title">
      </el-table-column>
     <el-table-column
      prop="img"
      label="图片"
      width="100">
     <template slot-scope="scope">
      <img :src="scope.row.img" style="width:40px;"/>
     </template>
      </el-table-column>
      <el-table-column
        label="类目"
        prop="categoryId"
        width="150"
      >
        <template slot-scope="scope">     
            <div v-for="item in tidList">
              <div v-for="item1 in item.children">
                <el-tag v-if="scope.row.categoryId == item1.id" size="medium">{{item.categoryName}}/{{ item1.categoryName }}</el-tag>
              </div>
             
            </div>
        </template>
      </el-table-column>
      <el-table-column label="所属供应商" prop="supplierName" />
      <el-table-column label="单位" prop="unit" />
      <el-table-column
        label="是否在售"
        prop="state"
      >
      <template slot-scope="scope">
          <el-popover>
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.state === 1" size="medium" type="success">在售</el-tag>
              <el-tag v-else size="medium" type="success">下架</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column width="300" label="描述" prop="description" />
      <!-- <el-table-column
        label="商品详细介绍"
        width="80px"
      >
        <template slot-scope="scope" prop="detail"  >
          
        </template>
      </el-table-column> -->
      <el-table-column  label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" v-hasBtn="'product_detail'" class="el-button el-button--primary el-button--mini" @click="detail(scope.row)">详情</el-button>
          <el-button type="primary" v-hasBtn="'product_edit'" class="el-button el-button--primary el-button--mini" @click="to(scope.row)">编辑</el-button>
          <el-button type="success" v-hasBtn="'product_putaway'" class="el-button el-button--primary el-button--mini" v-if="scope.row.state === 0" @click="open(scope.row)">上架</el-button>
          <el-button type="warning"  v-hasBtn="'product_sold'" class="el-button el-button--primary el-button--mini" v-else @click="close(scope.row)">下架</el-button>
          <el-button type="danger"  v-hasBtn="'product_delete'" class="el-button el-button--primary el-button--mini" @click="delete1(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-dialog title="详细" :visible.sync="dialogTable">
     
        <p v-html="form.detail"></p>
      
      <!-- <el-form-item label="联系人">
        <span>{{ form.contactName }}</span>
      </el-form-item>
      <el-form-item label="联系电话">
        <span>{{ form.tel }}</span>
      </el-form-item> -->
      <!-- <el-form-item label="所在区域">
        <span>{{ form.region }}</span>
      </el-form-item> -->
      <!-- <el-form-item label="详细地址">
        <span>{{ form.addr }}</span>
      </el-form-item> -->
      <!-- <el-form-item label="邮箱地址">
        <span>{{ form.mailbox }}</span>
      </el-form-item> -->
      <!-- <el-form-item label="供应商账期">
        <span>{{ form.Days }}</span>
      </el-form-item> -->
      <!-- <el-form-item label="供应商状态">
        <span v-if="form.state === 0">禁用</span>
        <span v-else>正常</span>
      </el-form-item> -->
    </el-dialog>



    <el-pagination
    background
    style="margin-top: 10px"
    :page-sizes="[10, 20, 50, 100]"
    :current-page.sync="pagemenu.page.page"
    :page-size="pagemenu.page.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalCount"
    @size-change="handleSizeChange"
    @next-click="handleNextChange"
    @prev-click="handlePrevClick"
    @current-change="handleCurrentChange"
  />





 





    


  
    <div class="block">

    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination> -->
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
          title: '',
          state: 1,
          img: '',
          categoryId: '',
          supplierId:'',
          // createUser: '陕西永辉彩食鲜',
          unit: '',
          description: '',
          detail:'',
          voOriginalPrice: 0,
          voPrice: 0,
          
      },
      search:{
        title: '',
        state: '',
        cat: ''
      },
      dialogTable: false,
      input1: '',
      totalCount: 0,
      totalPages: '',
      pagemenu:{
            page: {
                page: 1,
                pageSize: 10
            }
        },
      input: '',
      state: '',
      cat: '',
      tableData: [],
      value: '',
      tableData2: [
        {
            name:"485", 
          size:"1KG" ,   
          many:"4.34",
          unit:"4.34",
          }
      ],

      tidList: [{}],
      option1: [{
          value: 0,
          label: '下架'
        }, {
          value: 1,
          label: '在售'
        }],

        option:[{}],

        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
          }, {
            value: 'daohang',
            label: '导航',
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
          }, {
            value: 'form',
            label: 'Form',
          }, {
            value: 'data',
            label: 'Data',
          }, {
            value: 'notice',
            label: 'Notice',
          }, {
            value: 'navigation',
            label: 'Navigation',
          }, {
            value: 'others',
            label: 'Others',
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      };
    },


    created() {
      this.getList()
      this.getTidList()
    },

  methods: {

    handleCurrentChange(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handlePrevClick(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handleNextChange(val) {
      this.pagemenu.page.page = val
      this.getList()
    },

    handleSizeChange(val) {
      this.pagemenu.page.pageSize = val
      this.getList()
    },



    detail(val){
      this.form.detail = val.detail
      this.dialogTable = true
    },




            searchList(){
                  console.log(this.search.cat.length)
                  if (this.search.title === '' && this.search.state === '' && this.search.cat.length < 1){
                    this.getList()
                  } else {
                    let data = {
                    relation:{
                      conditions:[]
                    }
                  }

                  if (this.search.title){
                      data.relation.conditions.push({
                        colName: 'title',
                        ruleType: 'like',
                        value: this.search.title
                      })
                  }

                  if (this.search.state){
                      data.relation.conditions.push({
                        colName: 'state',
                        ruleType: 'eq',
                        value: this.search.state
                      })
                  }

                  
                  if (this.search.cat.length > 0){
                      data.relation.conditions.push({
                        colName: 'category_id',
                        ruleType: 'eq',
                        value: this.search.cat
                      })
                  }

                  this.$request({
                      url: '/goods/lists',
                      method: 'post',
                      data: {
                        page: {
                          page: 1,
                          pageSize: 10
                        },
                        order:[{
                            colName: 'category_id',
                            orderType: '',
                        }],
                        relation: data.relation
                      }
                  }).then(res => {
                    this.tableData = res.data
                        this.totalCount = res.totalCount
                        this.totalPages = res.totalPages
                  })
                  }

},


    




    getList(){
            this.$request({
              url: '/goods/lists',
              method: 'post',
              data: this.pagemenu,
            }).then(res => {
                console.log(res.data)
                this.tableData = res.data
                this.totalCount = res.totalCount
          this.totalPages = res.totalPages
            })
        },

      //   tableData2: [
      //   {
      //       name:"485", 
      //     size:"1KG" ,   
      //     many:"4.34",
      //     unit:"4.34",
      //     }
      // ],


      getTidList(){
          this.$request({
              url: '/category/tidList',
              method: 'post',
              data: {
                page:{
                  page: 1,
                  pageSize: 1000
                }
               
              }
          }).then(res => {
              if (res.success){
                  res.data.forEach(item => {
                      item.children.forEach(item1 => {
                          if (item1.children.length < 1){
                              item1.children = undefined
                          }
                      })
                  })
                  this.tidList = res.data
                  this.option = res.data
              }
          })
      },



  


        to(val) {
            if (val != null){
              this.$router.push({
                  path: '/text',
                  query:{
                      id: val.id
                  }
              })
              console.log("++++++++++++++++++++++++++++++++++++++++++++++++++++++", val.id)
            } else {
                  this.$router.push("/text")
            }
          
          },


        open(val){
          this.$confirm('此操作将激活商品--' + val.title + '--, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$request({
            url: '/goods/enable/' + val.id,
            method: 'get'
                }).then(res => {
            if (res.success){
                console.log(res)
                this.getList()
                this.$notify.success("激活成功")
            } else {
               this.$notify.warning(res.errMessage)
            }
        })
          
          });
        },


        delete1(val){
          this.$confirm('此操作将删除商品--' + val.title +  '--, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$request({
            url: '/goods/delete/' + val.id,
            method: 'get'
                }).then(res => {
            if (res.success){
                console.log(res)
                this.getList()
            } else {
               this.$notify.warning(res.errMessage)
            }
        })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },

        close(val) {
          this.$confirm('此操作将下架商品--' + val.title +  '--, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$request({
            url: '/goods/disable/' + val.id,
            method: 'get'
                }).then(res => {
            if (res.success){
                console.log(res)
                this.getList()
                this.$notify.success("下架成功")
            } else {
               this.$notify.warning(res.errMessage)
            }
        })
          });
        },

        open1() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //  handleClick(row) {
      //   console.log(row);
      // },
      // handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      // },
      // handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      // }
    }
  }
</script>
